<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onPullDownRefresh, onShow } from "@dcloudio/uni-app";
import { user_info_api } from "@/api/guider_home";
import { AppData } from "@/utils/app";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";

import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import ServiceContact from "@/components/service/contact.vue";

onLoad(() => {
  reloadUserData();
  AppData.initConfig((config) => {
    helpList.value = config.help_list;
  });
});
onShow(() => {
  tempData.isInit && reloadUserData();
  tempData.isInit = true;
});
onPullDownRefresh(() => {
  reloadUserData()
    .then(() => uni.stopPullDownRefresh())
    .catch(() => uni.stopPullDownRefresh());
});

const reloadUserData = () => {
  if (Account.isLogin) {
    const _userData = AppData.userData;
    userData.third_img = _userData.third_img;
    userData.nick_name = _userData.nick_name;
    userData.is_guide_certification = _userData.is_guide_certification;

    return user_info_api().then((resp) => {
      userData.third_img = resp.avatar_url;
      userData.nick_name = resp.nickname;
      userData.is_guide_certification = resp.is_guide_certification;
      userData.guider_type_name = resp.guider_type_name;
      userData.is_vip_member = resp.is_vip_member;
      userData.vip_end_date = resp.vip_end_date;
      userData.status = resp.status;
      numData.pending_pay_count = resp.pending_pay_count;
      numData.pending_comment_count = resp.pending_comment_count;

      AppData.userData = { ..._userData, ...toRaw(userData) };
    });
  } else {
    userData.third_img = "/static/my-avatar.png";
    userData.nick_name = "登录";
    userData.is_guide_certification = 0;
    userData.is_vip_member = 0;
    userData.status = -1;
    return Promise.resolve();
  }
};

const userData = reactive({
  third_img: "",
  nick_name: "",
  is_guide_certification: 0,
  guider_type_name: "",
  is_vip_member: 0,
  vip_end_date: "",
  status: -1,
});
const userClick = () => {
  // Account.isLogin
  //   ? Router.navigateTo("/package/my/pages/info/info")
  //   : Account.login(() => Router.navigateBack());
  Account.isLogin || Account.login(() => Router.navigateBack());
};

const vipClick = () => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(isLogin, "/package/mall/pages/vip/index");
  });
};

const numData = reactive({ pending_pay_count: 0, pending_comment_count: 0 });

const appClick = (url: string) => {
  Account.checkLogin((isLogin) => {
    Router.navigateToOrRedirectTo(isLogin, url);
  });
};

const certificateClick = () => {
  Account.checkLogin((isLogin) => {
    const userData = AppData.userData;
    Router.navigateToOrRedirectTo(
      isLogin,
      userData.is_guide_certification === 1
        ? "/package/guider/pages/detail/index"
        : userData.status === -1
        ? "/package/guider/pages/apply/type"
        : "/package/guider/pages/apply/detail"
    );
  });
};

const helpList = ref<any[]>([]);
const helpClick = (index: number) => {
  if (index === -1) {
    Router.navigateTo(`/package/other/pages/question/index`);
  } else {
    const help = helpList.value[index];
    Router.navigateTo(
      `/package/other/pages/question/detail?${Router.dataToQuery({
        id: help.id,
        name: help.title,
      })}`
    );
  }
};

const tempData = { isInit: false };
</script>

<template>
  <NavBg url="/static/index-bg.png" />
  <NavSpace />

  <view class="my-user">
    <image
      class="my-user-avatar"
      :src="userData.third_img"
      mode="aspectFill"
      @click="userClick"
    />
    <view class="my-user-content">
      <view style="display: flex; align-items: center">
        <view class="my-user-name" @click="userClick">
          {{ userData.nick_name }}
        </view>
        <!-- <image
          class="my-user-vip"
          v-if="userData.is_vip_member === 1"
          src="/static/my-vip.png"
        /> -->
      </view>
      <view style="display: flex" v-if="userData.is_guide_certification === 1">
        <view class="my-user-identity">
          <image class="my-user-identity2" src="/static/my-identity.png" />
          {{ userData.guider_type_name }}
        </view>
      </view>
    </view>
  </view>

  <!-- <view class="my-vip">
    <image class="my-vip-bg" src="/static/my-vip2.png" />
    <view class="my-vip-wrapper">
      <view class="my-vip-content">
        <image class="my-vip-label" src="/static/my-vip3.png" />
        <view class="my-vip-desc">
          {{
            userData.is_vip_member === 1
              ? `有效期至：${userData.vip_end_date}`
              : "畅享VIP权益"
          }}
        </view>
      </view>
      <view class="my-vip-btn" @click="vipClick">
        {{ userData.is_vip_member === 1 ? "会员中心" : "开通会员" }}
        <image class="my-vip-btn2" src="/static/my-vip4.png" />
      </view>
    </view>
  </view> -->

  <view class="my-order">
    <view
      class="my-order-item"
      @click="appClick('/package/my/pages/order/list')"
    >
      <image class="my-order-icon" src="/static/my-order.png" />
      <view class="my-order-name">全部订单</view>
    </view>
    <view
      class="my-order-item"
      @click="appClick('/package/my/pages/order/list?type=1')"
    >
      <view style="position: relative">
        <image class="my-order-icon" src="/static/my-order2.png" />
        <view class="my-order-dot" v-if="numData.pending_pay_count > 0">
          {{ numData.pending_pay_count }}
        </view>
      </view>
      <view class="my-order-name">待支付</view>
    </view>
    <view
      class="my-order-item"
      @click="appClick('/package/my/pages/order/list?type=3')"
    >
      <view style="position: relative">
        <image class="my-order-icon" src="/static/my-order3.png" />
        <view class="my-order-dot" v-if="numData.pending_comment_count > 0">
          {{ numData.pending_comment_count }}
        </view>
      </view>
      <view class="my-order-name">待评价</view>
    </view>
    <view
      class="my-order-item"
      @click="appClick('/package/my/pages/order/list?type=2')"
    >
      <image class="my-order-icon" src="/static/my-order4.png" />
      <view class="my-order-name">已付款</view>
    </view>
  </view>

  <view class="my-note" @click="appClick('/package/my/pages/note/index')">
    <image class="my-note-img" src="/static/my-note.png" />
    <view class="my-note-text">笔记内容发布管理</view>
  </view>

  <view class="my-menu">
    <view class="my-menu-title">功能服务</view>
    <view class="my-menu-wrapper">
      <view class="my-menu-item" @click="certificateClick">
        <view style="position: relative">
          <image class="my-menu-icon" src="/static/my-menu.png" />
          <view
            class="my-menu-mark"
            :style="{ backgroundColor: userData.status === 1 ? '#1bc76f' : '' }"
          >
            {{
              userData.status === 0
                ? "审核中"
                : userData.status === 1
                ? "已认证"
                : userData.status === 2
                ? "审核不通过"
                : "未认证"
            }}
          </view>
        </view>
        <view class="my-menu-name">身份认证</view>
      </view>
      <view
        class="my-menu-item"
        @click="appClick('/package/my/pages/like/list')"
      >
        <image class="my-menu-icon" src="/static/my-menu2.png" />
        <view class="my-menu-name">点赞</view>
      </view>
      <view
        class="my-menu-item"
        @click="appClick('/package/my/pages/collect/list')"
      >
        <image class="my-menu-icon" src="/static/my-menu3.png" />
        <view class="my-menu-name">收藏</view>
      </view>
      <view
        class="my-menu-item"
        @click="appClick('/package/my/pages/address/list')"
      >
        <image class="my-menu-icon" src="/static/my-menu4.png" />
        <view class="my-menu-name">地址管理</view>
      </view>
      <view class="my-menu-item">
        <image class="my-menu-icon" src="/static/my-menu5.png" />
        <view class="my-menu-name">联系客服</view>
        <ServiceContact />
      </view>
      <view
        class="my-menu-item"
        @click="appClick('/package/my/pages/feedback/create')"
      >
        <image class="my-menu-icon" src="/static/my-menu6.png" />
        <view class="my-menu-name">意见反馈</view>
      </view>
      <navigator
        class="my-menu-item"
        url="/package/other/pages/setting/setting"
      >
        <image class="my-menu-icon" src="/static/my-menu7.png" />
        <view class="my-menu-name">设置</view>
      </navigator>
    </view>
  </view>

  <view class="my-help">
    <view class="my-help-bg"></view>
    <image class="my-help-icon" src="/static/my-help.png" />
    <view class="my-help-title">帮助中心</view>
    <view class="my-help-more" @click="helpClick(-1)">
      更多问题<image class="my-help-more2" src="/static/my-help2.png" />
    </view>
    <view class="my-help-wrapper">
      <view
        class="my-help-question"
        v-for="(i, d) of helpList"
        :key="i.id"
        @click="helpClick(d)"
      >
        {{ i.title }}
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 10rpx;
  padding-bottom: 30rpx;
}

.my-user {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 40rpx 30rpx;

  .my-user-avatar {
    flex-shrink: 0;
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    border: 4rpx solid #ffffff;
  }

  .my-user-content {
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
  }

  .my-user-name {
    min-width: 0;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .my-user-vip {
    flex-shrink: 0;
    width: 120rpx;
    height: 40rpx;
    margin-left: 16rpx;
  }

  .my-user-identity {
    position: relative;
    display: flex;
    align-items: center;
    height: 34rpx;
    padding-left: 40rpx;
    padding-right: 18rpx;
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #e1810e;
    font-weight: bold;
    border-radius: 24rpx;
    background-color: #fff2d0;
  }

  .my-user-identity2 {
    position: absolute;
    left: 0;
    top: -2rpx;
    width: 44rpx;
    height: 44rpx;
  }
}

.my-vip {
  position: relative;
  width: 650rpx;
  margin: 0 auto;

  .my-vip-bg {
    display: block;
    width: 100%;
    height: 180rpx;
  }

  .my-vip-wrapper {
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    right: 30rpx;
    display: flex;
    align-items: flex-start;
  }

  .my-vip-content {
    flex-grow: 1;
    min-width: 0;
  }

  .my-vip-label {
    display: block;
    width: 314rpx;
    height: 34rpx;
    margin-bottom: 10rpx;
  }

  .my-vip-desc {
    font-size: 24rpx;
    color: #b98033;
    line-height: 28rpx;
  }

  .my-vip-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 174rpx;
    height: 58rpx;
    font-size: 26rpx;
    color: #ffda8b;
    font-weight: bold;
    border-radius: 68rpx;
    background: linear-gradient(270deg, #4c3718 93%, #4f4429);
  }

  .my-vip-btn2 {
    width: 14rpx;
    height: 24rpx;
    margin-left: 8rpx;
  }
}

.my-order {
  position: relative;
  display: flex;
  padding: 48rpx 26rpx 20rpx;
  // margin: -60rpx 20rpx 20rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  border: 2rpx solid #ffffff;
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10rpx);
  box-shadow: 0rpx 0 16rpx 0 rgba(0, 0, 0, 0.08),
    0 4rpx 6rpx 0 rgba(255, 255, 255, 0.5) inset;

  .my-order-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 20rpx 0;
  }

  .my-order-icon {
    width: 68rpx;
    height: 68rpx;
  }

  .my-order-dot {
    position: absolute;
    top: -8rpx;
    right: 0;
    min-width: 12rpx;
    padding: 0 8rpx;
    font-size: 20rpx;
    color: #ffffff;
    line-height: 28rpx;
    white-space: nowrap;
    font-weight: bold;
    border-radius: 50%;
    background-color: #f95053;
  }

  .my-order-name {
    margin-top: 6rpx;
    font-size: 24rpx;
    color: #333333;
    line-height: 34rpx;
    font-weight: bold;
  }
}

.my-note {
  position: relative;
  width: 710rpx;
  margin: 0 auto 20rpx;

  .my-note-img {
    display: block;
    width: 100%;
    height: 100rpx;
  }

  .my-note-text {
    position: absolute;
    left: 190rpx;
    top: 50%;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    transform: translateY(-50%);
  }
}

.my-menu {
  padding-top: 30rpx;
  padding-bottom: 10rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .my-menu-title {
    padding-left: 40rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .my-menu-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0 28rpx;
  }

  .my-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding-top: 20rpx;
    padding-bottom: 16rpx;
    margin-bottom: 20rpx;
  }

  .my-menu-icon {
    width: 52rpx;
    height: 52rpx;
  }

  .my-menu-mark {
    position: absolute;
    left: 40rpx;
    top: -14rpx;
    padding: 0 6rpx;
    font-size: 20rpx;
    color: #ffffff;
    line-height: 32rpx;
    white-space: nowrap;
    border-radius: 16rpx 16rpx 16rpx 0;
    background-color: #ff5a5a;
  }

  .my-menu-name {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #2d2d2d;
    line-height: 32rpx;
  }
}

.my-help {
  position: relative;
  padding-top: 30rpx;
  padding-bottom: 20rpx;
  margin: 0 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .my-help-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 128rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(180deg, #fff2e7, rgba(255, 244, 233, 0));
    opacity: 0.7;
  }

  .my-help-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 120rpx;
    height: 120rpx;
  }

  .my-help-title {
    position: relative;
    padding-left: 40rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .my-help-more {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
    height: 34rpx;
    font-size: 24rpx;
    color: #666666;
  }

  .my-help-more2 {
    width: 24rpx;
    height: 24rpx;
    margin-left: 4rpx;
  }

  .my-help-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 40rpx;
  }

  .my-help-question {
    padding: 0 18rpx;
    margin-right: 30rpx;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    color: #ff7900;
    line-height: 46rpx;
    border-radius: 28rpx;
    border: 2rpx solid rgba(255, 195, 141, 0.5);
    background-color: #ffffff;
  }
}
</style>